<template>
	<view class="_popup" :class="popupClass" >
		<view class="_mask" @tap.stop="$emit('hide')"></view>
		<view class="_body">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			popupClass:{
				type:String,
				default:'none'
			}
		}
	}
</script>

<style scoped>
	._popup ._mask{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}
	._popup{
		z-index: 2000;
	
	}
	._mask{
		z-index: 2002;
		background: rgba(0,0,0,0.5);
	}
	._popup ._body{
		position: fixed;
		bottom: -1035rpx;
		width: 92%;
		padding: 0 4%;
		height: 1035rpx;
		z-index: 2003;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		border-radius:20rpx 20rpx 0 0 ;
	}
	._popup .show{
		display: block;
	}
	.show ._mask{
		animation: showMask 0.2s linear both;
	}
	.show ._body{
		animation: showBody 0.2s linear both;
	}
	._popup .hide{
		display: block;
	}
	.hide ._mask{
		animation: hideMask 0.2s linear both;
	}
	.hide ._body{
		animation: hideBody 0.2s linear both;
	}
	@keyframes showBody{
		0%{ transform: translateY(0);}
		100%{transform: translateY(-100%);}
	}
	@keyframes hideBody{
		0%{transform: translateY(-100%);}
		100%{transform: translateY(0);}
	}
	@keyframes showMask{
		0%{ opacity: 0;}
		100%{opacity: 1;}
	}
	@keyframes hideMask{
		0%{opacity: 1;}
		100%{opacity: 0;}
	}
	._popup.none{
		display: none;
	}
</style>
